<template>
	<view class="main">
		<gui-a-header title="政策详情"></gui-a-header>
		<view class="title_box gui-flex gui-justify-content-center">
			<view class="title">
				{{detailData.title}}
			</view>
		</view>
		<mp-html :content="$u.richImg(detailData.context)" />
		<!-- <uv-parse :content="detailData.context"></uv-parse> -->
		<view class="footer gui-flex gui-column gui-align-items-end">
			<view class="f24">
				{{detailData.creBy}}
			</view>
			<view class="f24 mt15">
				{{detailData.createTime}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		selectPromptOneInFo
	} from '@/api/app.js';

	const $u = reactive(inject('$u'))
	const policyId = ref('');
	const detailData = ref({
		context: ''
	})
	onLoad((option) => {
		if (option.policyId) {
			policyId.value = option.policyId;
			loadDetail();
		}
	})

	const loadDetail = () => {
		selectPromptOneInFo({
			id: policyId.value
		}).then(res => {
			if (res.code == 200) {
				res.data.context = res.data.context.replace(/<iframe[^>]*>/gi, function(match) {
					const src = match.match(/src="([^"]+)"/i) ?
						`src="${match.match(/src="([^"]+)"/i)[1]}"` : '';
					const style = match.match(/style="([^"]+)"/i) ?
						`style="${match.match(/style="([^"]+)"/i)[1]}"` : '';
					const videoTag = `<video ${src} class="video-style" controls></video>`;
					return videoTag;
				});
				detailData.value = res.data;
			}
		})
	}
</script>

<style lang="scss">
	.main {
		padding: 60rpx;
	}

	.title_box {
		margin-bottom: 30rpx;
	}

	.title {
		width: 500rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #323232;
		text-align: center;
	}

	.footer {
		margin-top: 44rpx;
		color: #555555;
	}

	.mt15 {
		margin-top: 15rpx;
	}
	
	.video-style {
		width: 100%!important;
	}
</style>